<template id="Bar">
  <div :id="id" :style="chartStyle">
    <slot></slot>
  </div>
</template>

<script>
    import defaultImange from "../img/bgBlue.png";

/**
 *@author 张馨月
 */
    export default {
      name: "ATBar",
      data () {
        return {
          myChart:null,
          // screenWidth: document.body.clientWidth,
        }
      },
      mounted(){
        this.$nextTick(function(){
          this.draw();
        })
      },
      watch:{
        xData(){
          this.draw()
        },
        yData(){
          this.draw()
        },
        // screenWidth (val) {
        //         if (!this.timer) {
        //             this.screenWidth = val
        //             this.timer = true
        //             let that = this
        //             setTimeout(function () {
        //                 // that.screenWidth = that.$store.state.canvasWidth
        //                 that.draw()
        //                 console.log(that.screenWidth)
        //                 // that.init()
        //                 that.timer = false
        //             }, 400)
        //         }
        //     }
      },
      props:{
/**
 *@type {string} id 容纳echarts的div的id随机生成
 */        
        id:{
          type: String,
          default: function () {
            let temp = [];
            for (let i = 0; i < 6; i++) {
              let randomChar = String.fromCharCode(65 + Math.floor(Math.random() * 19) + i);
              temp.push(randomChar);

            }
            return temp.reduce((pre, next) => pre + next);
          }
        },
/**
 *@type {string} xData x轴数据
 */  
        xData:{
          type:Array,
          // required:true,
          default:[]
        },
/**
 *@type {string} yData y轴数据
 */  
        yData:{
          type:Array,
          // required:true,
          default:[]
        },
/**
 *@type {string} seriesName 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
 */  
        seriesName:{
          type:String,
          // required:false,
          default:'默认文字'
        },
/**
 *@type {string} chartStyle 样式
 */  
        chartStyle:{
          type:String,
          // required:true,
          default:"width:100%;height:100%;"
        },
        fileName: {
          type:String,
          default:"echarts"
        },
        leftspace:{
          type:String,
          // required:true,
          default:'4%'
        },
        rightspace:{
          type:String,
          // required:true,
          default:'6%'
        },
        bottomspace:{
          type:String,
          // required:true,
          default:'3%'
        },
        toolboxRight:{
          type:String,
          default:'0px'
        },
        // toolboxLeft:{
        //   type:String,
        //   default:'0px'
        // },
        toolboxTop:{
          type:String,
          default:'55px'
        },
        itemColor:{
          type:Array,
          default:function(){
            return ['#4990ff']
          }
        },
        showDownloadIcon:{
          type:Boolean,
          default:true
        }, 
        formatter:{
            default:'<p style="height:15px;"><svg width="20px" height="20px" version="1.1"><circle cx="10" cy="15" r="4" fill="#4990ff"stroke-width="2" /></svg>{b0}：{c0}</p>'
        },  
        tooltippadding:{
          default:function(){
            return [8,20 ,17 ,15]
          }
        }
      },
      methods: {
/**
 *@description 对已有dom节点进行js填充echarts
 */
        draw(){
            // console.log('draw')
            if (document.getElementById(this.id)) {
              this.myChart = this.myChart === null ? this.$echarts.init(document.getElementById(this.id)) :this.myChart 
              this.myChart.setOption({
                  color: this.itemColor,
                  toolbox:{
                      right:this.toolboxRight,
                      top:this.toolboxTop,
                      // left:this.toolboxLeft,
                      show: this.showDownloadIcon,
                      itemSize:84,
                      orient: 'horizontal',
                      itemGap: 10,
                      showTitle: true,
                      iconStyle: {
                        normal:{
                          borderColor: '#5c6781',
                        },
                        emphasis:{
                          borderColor: '#4990ff'
                        }
                      },
                      feature: {
                            saveAsImage:{
                                show:true,
                                name: this.fileName,
                                title: ' ',
                                icon: 'image://'+defaultImange,
                            }    
                      }                 
                  },
                  grid: {
                      left: this.leftspace,
                      right: this.rightspace,
                      bottom: this.bottomspace,
                      containLabel: true,
                  },
                  tooltip:{
                    padding:this.tooltippadding,
                    formatter:this.formatter,
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    },
                    backgroundColor:'rgba(50, 50, 50, 0.7)',
                    borderColor:'rgb(51, 51, 51)',
                    borderWidth:0,
                    textStyle:{
                        color:"#fff",
                        fontSize:12,
                        fontFamily: '宋体'
                    },
                  },
                  xAxis : [
                    {
                      type : 'category',
                      data : this.xData,
                      axisTick: {
                          alignWithLabel: true
                      },
                      axisLine:{
                          lineStyle:{
                              color:'#e0e0e8',
                              width:1
                          }
                      },
                      axisLabel: {
                        show: true,
                        interval: 'auto',
                        textStyle: {
                            color: '#758697',
                            fontFamily: '宋体'
                        }
                      }  
                    }
                  ],
                  yAxis : [
                    {
                      type : 'value',
                      splitLine: {
                          lineStyle:{
                              color:'#f5f7fb',
                              width:1,
                          }
                      },
                      axisLine:{
                          lineStyle:{
                              color:'#fff',
                              width:1,
                          }
                      },
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: '#758697',
                              fontFamily: '宋体'
                          }
                      }
                    }
                  ],
                  series : [{
                      name:this.seriesName,
                      type:'bar',
                      barWidth: '36px',
                      data:this.yData
                  }]
              });
              var _this=this
              window.addEventListener("resize",function(){
                  _this.myChart.resize();
              })
            }
        },
      }
    }
</script>

